<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>事件的三种写法</title>
</head>
<body>
    事件是什么？
    事件有哪些类型？
    事件如何去用？

    事件是浏览器中的用户行为和客户端行为，它是浏览器规定好的行为
    用户可以触发事件，浏览器再根据事件类型执行某些默认的操作,比如说点击
    链接的时候跳转到某个页面上去，比如说点击提交的时候，跳转到某个页面上去.

    用户触发事件------>浏览器监听到事件已经发生--------->执行默认的操作
    ---------->如果没有默认操作情况下，可指定事件发生后的操作(回调函数)

    事件有三种类型:鼠标事件、键盘事件、window事件

    事件要知道：发生事件的元素、事件类型、事件函数


    <a href="#">我要触发事件</a>
    onclick="alert(1)"这种方式已经不被推荐使用了

</body>
</html>
<script>
    var a = document.querySelector('a');
    //事件元素.on + 事件类型 = 事件函数
    /*a.onclick = function(){
        alert(2);
    };*/
    //第三种通过使用addEventListener来添加事件
    var fun = function(){
        alert(3);
    }
    a.addEventListener('click',fun);
    //a.removeEventListener('click');错误的写法,移除事件
    //removeEventListener(box);错误的写法
    //removeEventListener(a,'click');错误的写法
    a.removeEventListener('click',fun);
    //当你不需要清除掉的时候，使用匿名函数，当你需要清除掉的时候，给函数命名
</script>